<template>
  <a-modal v-model:open="isShow" @cancel="handleCancel" title="高级查询" style="width: 1000px;">
    <div style="display: flex;flex-wrap: wrap;min-height: 166px;overflow: auto;">
      <div style="width:70%;">
        <a-row v-for="(item,index) in data.selectRow" style="margin-bottom: 10px;" :gutter="16">
          <a-col :span="8">
            <a-select v-model:value="item.column" placeholder="请选择字段" style="width: 100%" @change="(e)=>handleSelectChange(e,item)">
              <template v-for="options in columns" :key="options.dataIndex">
                <a-select-option v-if="!options.children" :value="options.dataIndex">{{options.title}}</a-select-option>
              </template>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-select v-model:value="item.type" style="width: 100%">
              <a-select-option :value="'1'">等于</a-select-option>
              <a-select-option :value="'2'">包含</a-select-option>
              <a-select-option :value="'3'">大于</a-select-option>
              <a-select-option :value="'4'">小于</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="8">
            <a-input v-if="item.inputType === 'input' || item.inputType === ''" v-model:value="item.value" style="width: 100%"/>
            <a-select v-if="item.inputType ==='select'" v-model:value="item.value" style="width: 100%">
              <a-select-option v-for="option in item.options" :value="option.value">{{option.label}}</a-select-option>
            </a-select>
            <a-range-picker v-model:value="item.date" style="width: 100%"
                            v-if="item.inputType==='date'"  valueFormat="YYYY-MM-DD" />
          </a-col>
          <a-col :span="4">
            <a-button @click="add">
              <template #icon>
                <PlusOutlined />
              </template>
            </a-button>
            <a-button style="margin-left: 10px" @click="remove(index)">
              <template #icon>
                <MinusOutlined />
              </template>
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div style="width:30%;">
        <a-list size="small" bordered :data-source="data.listData">
          <template #header>
            <span>保存的查询条件</span>
          </template>
          <template #renderItem="{ item }">
            <a-list-item style="cursor:pointer;" @click="showSave(item)">
              <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
                <span>{{ item.name }}</span>
                <CloseOutlined style="font-size: 10px;" @click.stop="clearSearch(item)"/>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
    <template #footer>
      <div style="display: flex;">
        <div style="margin-right: auto;">
          <a-button @click="clearAllSearch">清空</a-button>
          <a-button :loading="btnLoading" @click="saveSearch">保存查询条件</a-button>
        </div>
        <div>
          <a-button @click="handleCancel">关闭</a-button>
          <a-button type="primary" :loading="btnLoading" @click="handleOk">查询</a-button>
        </div>
      </div>
    </template>
  </a-modal>
  <a-modal v-model:open="open" title="保存名称" @ok="saveOk" @cancel="closeSearch">
    <span>保存名称</span>
    <a-input v-model:value="searchName" placeholder="请输入名称"/>
  </a-modal>
</template>
<script setup>
import { ref,computed,reactive } from 'vue'
import {getManyDictItems} from "@/api/system/dict.js";
import {message} from "ant-design-vue";
import {getLVal, setLVal} from "@utils/storage.js";
const props = defineProps({
  columns: {
    type: Array,
  },
  openSuperSearch:{
    type: Boolean,
    default: false
  }
})
const btnLoading = ref(false)
const searchName = ref('')
const emit = defineEmits(['close'])
const open = ref(false)
const data = reactive({
  selectRow:[
    {
      column:'',
      type:'1',
      value:'',
      inputType:'',
      date:[]
    },
  ],
  listData:getLVal(import.meta.env.VITE_LISTDATA) || [],
})
const isShow = computed(()=>{
  return props.openSuperSearch
})
/**
 * 提交查询条件
 */
const handleOk = () => {
  data.selectRow.forEach(item=>{
    if(item.date.length !== 0){
      item.value = item.date.join(',')
    }
  })
}
/**
 * 打开保存条件弹窗
 */
const saveSearch = () => {
  open.value = true
}
/**
 * 保存条件
 */
const saveOk = () => {
  if(searchName.value === ''){
    return message.error('请输入名称')
  }
  let arr = data.selectRow
  data.listData.push({
    name:searchName.value,
    saveData:arr
  })
  setLVal(import.meta.env.VITE_LISTDATA,data.listData)
  searchName.value = ''
  open.value = false
}
/**
 * 关闭查询条件弹窗
 */
const closeSearch = () => {
  open.value = false
  searchName.value = ''
}
/**
 * 添加条件
 * @param e 选中的值
 * @param item 选中的对象
 * @returns {Promise<void>}
 */
const handleSelectChange = async (e,item) => {
  const index = props.columns.findIndex(item=>{
    return item.dataIndex === e
  })
  let dict = props.columns[index].dict
  item.inputType = props.columns[index].type
  if(item.inputType === 'select'){
    try{
      const res = await getManyDictItems({
        dictCodeList:dict
      })
      item.options = res.result[dict]
    }catch (e){
      console.log(e)
    }
  }
  console.log(data.selectRow)
}
/**
 * 添加条件
 */
const add = () => {
  data.selectRow.push({
    column:'',
    type:'1',
    value:'',
    inputType:'',
    date:[]
  })
}
/**
 * 删除条件
 * @param index 索引
 */
const remove = (index) => {
  if(data.selectRow.length > 1){
    data.selectRow.splice(index,1)
  }
}
/**
 * 关闭高级查询
 */
const handleCancel = () => {
  emit('close')
}
/**
 * 清空所有条件
 */
const clearAllSearch = () => {
  data.selectRow = [{
    column:'',
    type:'1',
    value:'',
    inputType:'',
    date:[]
  },]
}
/**
 * 清空保存的条件
 * @param item 保存条件对象
 */
const clearSearch = (item) => {
  let arr = data.listData.filter(i=>i.name !== item.name)
  setLVal(import.meta.env.VITE_LISTDATA,arr)
  data.listData = arr
}
/**
 * 显示保存条件弹窗
 * @param item 保存条件对象
 */
const showSave = (item) => {
  data.selectRow = [...item.saveData]
}
</script>
<style scoped>

</style>
